<script setup>
import { onMounted, reactive, ref } from "vue";
import { useRoute } from "vue-router";
import { getOneRegistration, modifyRegistration } from "@/api/message";
import { SUCCESS } from "@/core/constants/HttpStatus";
import { ElMessage } from "element-plus";

const router = useRoute();
const registrationId = ref();

onMounted(() => {
  registrationId.value = router.query.registrationId;
  loadPage();
});
const loadPage = async () => {
  try {
    const res = await getOneRegistration({ riId: registrationId.value });
    console.log(res);
    const { code, msg, data } = res.data;
    if (code == SUCCESS) {
      signForm.riId = data.riId;
      signForm.uid = data.uid;
      signForm.riRealname = data.riRealname;
      signForm.riGrade = data.riGrade;
      signForm.riMajor = data.riMajor;
      signForm.riContact = data.riContact;
      signForm.riIntro = data.riIntro;
      signForm.riTeamId = data.riTeamId;
    }
  } catch {
    ElMessage.error(error.message || "获取信息失败");
  }
};

const signFormRef = ref(null);
const signForm = reactive({
  riId: "", //申请编号
  uid: "", //学号
  riRealname: "", //真实姓名
  riGrade: "", //年级
  riMajor: "", //专业
  riContact: "", //联系方式
  riIntro: "", //个人简介
  riTeamId: "", //报名队伍ID
});

const signFormRules = {
  riGrade: [
    { required: true, message: "请输入年级", trigger: "blur" },
    {
      pattern: /^\d{4}$/,
      message: "年级应为四位数字，如：2021",
      trigger: "blur",
    },
  ],
  riMajor: [
    { required: true, message: "请输入专业", trigger: "blur" },
    {
      pattern: /^[\u4e00-\u9fa5]+$/,
      message: "专业应为中文字符",
      trigger: "blur",
    },
  ],
  riContact: [{ required: true, message: "请输入联系方式", trigger: "blur" }],
};

const modify = async () => {
  await signFormRef.value.validate(async (valid) => {
    if (valid) {
      try {
        const res = await modifyRegistration(signForm);
        console.log(res);
        const { code, msg } = res.data;
        if (code == SUCCESS) {
          ElMessage.success(msg);
        } else {
          ElMessage.error(msg);
        }
      } catch {
        ElMessage.error(error.message || "修改失败");
      }
    }
    else{
      ElMessage.error("表单校验未通过")
    }
  });
};
</script>
<template>
  <div class="appli-details">
    <div class="content-box">
      <div class="title">
        <h3>队伍申请信息</h3>
        <router-link
          class="iconfont icon-guanbi"
          to="/messages/myApply"
        ></router-link>
      </div>
      <el-form
        class="sign-form"
        ref="signFormRef"
        :rules="signFormRules"
        :model="signForm"
      >
        <el-row>
          <el-form-item label="学号："
            ><el-input v-model="signForm.uid" disabled></el-input
          ></el-form-item>
          <el-form-item label="姓名："
            ><el-input v-model="signForm.riRealname" disabled></el-input
          ></el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="年级：" prop="riGrade"
            ><el-input v-model="signForm.riGrade"></el-input
          ></el-form-item>
          <el-form-item label="专业：" prop="riMajor"
            ><el-input v-model="signForm.riMajor"></el-input
          ></el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="联系方式：" class="contact" prop="riContact"
            ><el-input v-model="signForm.riContact"></el-input
          ></el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="个人简介：" class="personal-intro"
            ><el-input
              v-model="signForm.riIntro"
              type="textarea"
              :rows="10"
            ></el-input
          ></el-form-item>
        </el-row>
        <el-row>
          <el-button class="modify-button" type="primary" @click="modify"
            >提交修改</el-button
          >
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<style scoped lang="less">
.appli-details {
  .content-box {
    width: 900px;
    min-height: 400px;
    background-color: #fafafa;
    border: 1px solid #f2f2f2;

    margin: 0px auto;
    padding: 20px 30px;

    .title {
      font-size: 20px;
      display: grid;
      grid-template-columns: 99% 1%;
      margin-left: 20px;
      margin-bottom: 30px;
      .icon-guanbi {
        color: gray;
        text-decoration: none;
      }
    }
    .sign-form {
      .el-row {
        width: 90%;
        margin: 0px 16px;
        display: flex;
        justify-content: space-between;
        .el-form-item {
          width: 45%;
        }
        .personal-intro {
          width: 100%;
        }
        .modify-button {
          margin: 10px auto;
          margin-top: 20px;
          width: 200px;
        }
      }
    }
  }
}
</style>